<template>
  <div class='page-content'>

    <!-- 工具栏区域 -->
    <table-bar :showTop="false"
               :columns="columns"
               @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        <el-form label-width="70px">
          <el-row :gutter="20">

            <el-col :xs="24"
                    :sm="14"
                    :lg="7">
              <el-form-item label="名称:">
                <el-input v-model="queryForm.kw"
                          placeholder="输入加工产品类型名或商家名称查询"></el-input>
              </el-form-item>
            </el-col>

            <el-row :xs="24"
                    :sm="12"
                    :lg="6"
                    style="float: right; margin-right: 10px;">
              <el-button type="primary"
                         @click="query">搜索</el-button>
              <el-button>重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary"
                   plain
                   @click="showAddDialog">新增工艺</el-button>
        <el-button type="danger"
                   plain
                   @click="delAll">批量删除</el-button>
      </div>

    </table-bar>

    <!-- 表格区域 -->
    <the-table :data="technologyList"
               :showPage="false"
               @getDataBySelectBox="handleSelectionChange"
               ref="table">
      <el-table-column type="selection"
                       width="55"></el-table-column>
      <el-table-column label="序号"
                       type="index"
                       v-if="columns[0].show" />
      <el-table-column label="工艺id"
                       prop="technologyId"
                       v-if="columns[1].show" />
      <el-table-column label="工艺名称"
                       prop="technologyName"
                       v-if="columns[2].show" />
      <el-table-column label="工艺描述"
                       prop="technologyDescribe"
                       v-if="columns[3].show" />
      <el-table-column label="创建时间"
                       prop="gmtCreate"
                       v-if="columns[4].show" />
      <el-table-column label="修改时间"
                       prop="gmtModified"
                       v-if="columns[5].show" />

      <el-table-column fixed="right"
                       label="操作"
                       width="150px"
                       v-if="columns[6].show">
        <template slot-scope="scope">
          <el-button type="text"
                     icon="el-icon-edit"
                     @click="showEditDialog(scope.row)">修改
          </el-button>
          <el-button type="text"
                     style="color: #FA6962"
                     icon="el-icon-delete"
                     @click="delById(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <!-- 分页器区域 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[5, 8, 10, 15]"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   class="page">
    </el-pagination>

    <!-- 修改工艺对话框 -->
    <el-dialog title="修改加工工艺"
               :visible.sync="editDialog"
               @close="dialogClose('addFormRef')"
               width="
               30%">
      <el-form :model="editForm"
               :rules="editFormRules"
               ref="editFormRef"
               label-width="80px">
        <el-form-item label="工艺名称"
                      prop="technologyDescribe">
          <el-input v-model="editForm.technologyName"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="工艺描述"
                      prop="technologyName">
          <el-input type="textarea"
                    clearable
                    v-model="editForm.technologyDescribe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加工艺对话框 -->
    <el-dialog title="添加加工工艺"
               :visible.sync="addDialog"
               @close="dialogClose('addFormRef')"
               width="30%">
      <el-form :model="addForm"
               :rules="editFormRules"
               ref="addFormRef"
               label-width="100px">
        <!-- <el-form-item label="加工流程"
                      prop="processId">
          <el-select v-model="addForm.processId"
                     filterable
                     placeholder="请选择加工流程">
            <el-option v-for="item in options"
                       :key="item.processId"
                       :label="item.processName"
                       :value="item.processId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="工艺名称"
                      prop="technologyDescribe">
          <el-input v-model="addForm.technologyName"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="工艺描述"
                      prop="technologyName">
          <el-input type="textarea"
                    clearable
                    v-model="addForm.technologyDescribe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { changeColumn, pagination, dialogClose, multipleSelection, queryForm } from '@/api/mixin'
import { dateShorter } from '@/utils/utils'

export default {
  name: "TechnologyManage_P",
  meta: {
    title: "加工工艺管理",
  },
  mixins: [changeColumn, pagination, dialogClose, queryForm, multipleSelection,
  ],
  data () {
    return {
      // 鸽子类型表格数据
      technologyList: [],
      columns: [
        { name: "序号", show: true },
        { name: "工艺id", show: false },
        { name: "工艺名称", show: true },
        { name: "工艺描述", show: true },
        { name: "创建时间", show: true },
        { name: "修改时间", show: true },
        { name: "操作", show: true },
      ],
      // 条件查询参数
      queryForm: {
        kw: '',//加工产品类型名或商家名称
      },
      editForm: {
        processingId: 0,//所属加工流程id
        technologyDescribe: '',
        technologyName: ''
      },
      technologyId: '',//工艺id
      editFormRules: {
        technologyName: [{ required: true, message: '请输入工艺名称', trigger: 'blur' }, { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }],
        technologyDescribe: [{ required: true, message: '请输入工艺描述', trigger: 'blur' }],
        processId: [{ required: true }]
      },
      addForm: {
        processingId: '',
        technologyDescribe: '',
        technologyName: ''
      },
      editDialog: false,
      addDialog: false,
      //新增工艺的流程列表
      // options: []
    }

  },
  computed: {
    select_processingId () {
      return this.$store.state.Usersetting.ProcessInfo.processingId
    }
  },
  methods: {
    changeColumn (columns) {
      this.columns = columns
      this.$refs.flowListRef.doLayout()
    },
    //分页器变化监听
    getList () {
      // console.log('分页器变化监听');
      this.getTechnologyList()
    },
    // 分页查询
    async getTechnologyList () {
      const { data: res } = await this.$http.get(`/processing/processing-technology/page/${this.pageNum}/${this.pageSize}`, { params: { processingId: this.select_processingId || '1' } })
      if (res.statusCode !== 20000) return this.$message.error('获取工艺列表失败')
      // console.log(res,'getTechnologyList');

      //截取时间yyyy-MM-dd
      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.technologyList = res.data.records
      this.total = res.data.total
    },
    async query () {
      const { data: res } = await this.$http.get(`/processing/processing-technology/like/${this.queryForm.kw}/${this.pageNum}/${this.pageSize}`, { params: { processingId: this.select_processingId } })

      if (res.statusCode !== 20000) return this.$message.error('查询失败')

      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.technologyList = res.data.records
      this.total = res.data.total
      this.$message.success('查询成功')
    },
    /* 编辑 */
    async showEditDialog ({ technologyId }) {
      //保存id
      this.editForm.processingId = this.select_processingId
      this.technologyId = technologyId
      //获取最新的记录
      const { data: res } = await this.$http.get(`/processing/processing-technology/info/${technologyId}`)
      if (res.statusCode !== 20000) return this.$message.error('获取最新的工艺记录失败')

      //保存
      this.editForm.technologyName = res.data.technologyName
      this.editForm.technologyDescribe = res.data.technologyDescribe
      // 显示
      this.editDialog = true
    },
    update () {
      // 表单验证
      this.$refs.editFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        // 发送请求
        const { data: res } = await this.$http.put(`/processing/processing-technology/update/${this.technologyId}`, this.editForm)
        if (res.statusCode !== 20000) return this.$message.error('修改失败')


        // 关闭
        this.editDialog = false
        this.$message.success('修改成功')

        //刷选列表
        this.getTechnologyList()

      })





    },
    /* 编辑 */

    /* 删除 */
    delById ({ technologyId }) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete(`/processing/processing-technology/deletion/${technologyId}`)

        if (res.statusCode !== 20000) return this.$message.error('删除失败')

        this.$message.success('删除成功')
        this.getTechnologyList()

      }).catch(() => {
        this.$message('已取消删除!')
      })
    },
    delAll () {
      if (this.multipleSelection.length === 0)
        return this.$message.error('未选中记录')

      this.$confirm('此操作将永久删除这些记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ids = []

        this.multipleSelection.forEach(x => ids.push(x.technologyId))

        const { data: res } = await this.$http.delete(`/processing/processing-technology/deletion/batch`, {
          data: ids,
          headers: {
            'Content-Type': 'application/json'
          },
        })//参数置于请求体

        if (res.statusCode !== 20000) return this.$message.error('删除失败')

        this.$message.success('批量删除成功')
        this.getTechnologyList()

      })
        .catch(() => {
          this.$message('已取消删除!')
        })

    },
    /* 删除 */

    /* 新增 */
    showAddDialog () {
      this.addForm.processingId = this.select_processingId
      this.addDialog = true
    },
    async add () {
      this.$refs.addFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        const { data: res } = await this.$http.post(`/processing/processing-technology/`, this.addForm)
        if (res.statusCode !== 20000) return this.$message.error('添加失败')

        this.$message.success('添加成功')
        this.getTechnologyList()
        this.addDialog = false
      })

    }
  },
  created () {
    this.getTechnologyList()
  }
}
</script>

<style scoped>
.page {
  margin-top: 6px;
  text-align: center;
}
</style>